import loadingUrl from "@/assets/loading.svg";
import styles from "./loading.module.scss";

function getLoadingImage(el) {
  return el.querySelector("img[data-role=loading]")
}

function createLoadingImg() {
  const img = document.createElement("img")
  img.dataset.role = "loading"
  img.src = loadingUrl
  img.className = styles.loading
  return img
}

// 导出带有指令的配置对象
export default function(el, binding) {
  const curImg = getLoadingImage(el)
  if (binding.value) {
    if (!curImg) {
      const img = createLoadingImg()
      el.appendChild(img)
    }
  } else {
    if (curImg) {
      curImg.remove()
    }
  }
}
